<template>
	<view>
		<!--  <u-navbar title="快速报修" bgColor="#0F53AC" :titleStyle="titleStyle" leftIconColor="#fff">
		</u-navbar> -->
		<view class="bx-list">
			<view class="bx-list-title">
				<view class="left">
					<view class="red">*</view>报修设备信息
				</view>
				<view class="right">
					<view class="iconfont icon-app-saoma sm-add" @click="saomaAdd">扫码添加</view>
					<view class="iconfont icon-app-add sm-sd" @click="togoSelectSb">手动添加</view>
				</view>
			</view>
			<view class="bx-info" v-if="detailList && detailList.id">
				<view class="left-icon">
					<image v-if="detailList.devicePicture" :src="detailList.devicePicture"></image>
					<image style="width:80rpx;height: 80rpx;" v-if="!detailList.devicePicture"
						src="../../../static/images/index/weibaorenwu.png" mode=""></image>
				</view>
				<view class="right-txt">
					<view class="txt1">{{ detailList.deviceNum == '' ? '' : detailList.deviceNum + '-' }}{{
						detailList.deviceName }}
					</view>
					<view class="txt2">{{ detailList.brand != '' ? (detailList.brand + '-') : '' }}{{ detailList.modelName
					}}</view>
				</view>
			</view>
		</view>
		<u-gap height="8" bgColor="#f2f2f2"></u-gap>
		<view class="bx-list">
			<view class="bx-list-title" @click="togoPeopleSelect">
				<view class="left">
					<view class="red">*</view>维修人
				</view>
				<view class="right1">
					<view :class="[(dataParams.repairUserName != '') ? 'select-bg' : '']">
						{{ dataParams.repairUserName != '' ? dataParams.repairUserName : '请选择' }}
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view class="kiss-upDown-list" style="padding: 32rpx 20rpx;">
			<view class="bx-list-title">
				<view class="left">
					<view class="red">*</view>故障描述
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea class="textrea" cursorSpacing="60" v-model="dataParams.description" placeholder="请输入故障描述">
				</u--textarea>
			</view>
		</view>
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<!-- <view class="line" style="margin-top: 2rpx;"></view> -->
		<view class="bx-title padding2">
			<view class="left">
				<view class="red">*</view>故障照片<view class="color2">(可传视频或图片，最多9个)</view>
			</view>
		</view>
		<view class="bx-upload">
			<uploadVideo @getdata="getdata" @delete="deletePic" :fileType="13">

			</uploadVideo>
		</view>
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view class="bx-title2">
			提示：报修成功后，可在[维修列表]中查看维修处理进度
		</view>
		<view class="bx-bottom">
			<view class="btn" @click="$dianji(comfirpage, 'onoff')">报修</view>
		</view>
	</view>
</template>

<script>
import uploadVideo from '@/components/uploadVideo/index.vue';
export default {
	components: {
		uploadVideo
	},
	data() {
		return {
			value1: "",
			fileList: [],
			detailList: {},
			wxpeopleList: {},
			titleStyle: {
				color: "#fff"
			},
			dataParams: {
				deviceId: "", //设备id
				repairUserId: "", //维修人id
				repairUserName: "", //维修人姓名
				description: "", //故障描述
				failurePictures: "" //故障照片
			},
			onoff: true,
			//选择图片类型
			accept: "media",
			choosevideoimage: 0,
		}
	},
	onLoad() {

	},
	onShow() {
		console.log('设备选中返回后的数据', this.detailList)
		if (this.detailList && this.detailList.id) {
			this.dataParams.deviceId = this.detailList.id;
		}
		console.log('维修人员选中返回后的数据', this.wxpeopleList)
		if (this.wxpeopleList && this.wxpeopleList.id) {
			this.dataParams.repairUserName = this.wxpeopleList.realName;
			this.dataParams.repairUserId = this.wxpeopleList.id;
		}
	},
	methods: {
		togoSelectSb() {
			uni.navigateTo({
				url: `/pages/subPackagesC/list/sbselect`,
				success: (res) => {
					uni.$emit('update', {
						msg: this.detailList.name
					})
				}
			});
		},
		togoPeopleSelect() {
			uni.navigateTo({
				url: '/pages/subPackagesC/list/peoplelist?type=4'
			})
		},
		saomaAdd() {
			const that = this
			// uni.$u.toast('该功能暂未开放，敬请期待~')
			uni.scanCode({
				onlyFromCamera: true,
				scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
				autoDecodeCharset: false,
				autoZoom: false,
				barCodeInput: false,
				success: function (res) {
					console.log('条码内容：' + res.result);
					let codeInfo = res.result.split('?')[1]
					//这里获取扫码信息并且对扫码信息进行解析
					let equId = codeInfo.split('&')[0];
					let deviceNum = codeInfo.split('&')[1];
					that.getdeviceList(equId.split('=')[1])
				},
				fail: function (error) {
					console.log('扫码失败了')
				}
			});
		},
		//获取列表
		getdeviceList(id) {
			uni.$u.http.get(`/device/mobile/deviceInfo/deviceDetail/${id}`).then(res => {
				console.log('res===>', res)
				if (res.code == 0) {
					if (res.data.removeFlag == 1) {
						uni.$u.toast('该设备已被删除')
						return
					}
					if (res.data.stopFlag == 1) {
						uni.$u.toast('该设备已停用')
						return
					}
					this.detailList = res.data
				}
			}).catch(err => { })
		},
		comfirpage() {
			var that = this;
			if (!that.dataParams.deviceId) {
				uni.$u.toast('请选择要报修的设备')
				return
			}
			if (!that.dataParams.repairUserId || !that.dataParams.repairUserName) {
				uni.$u.toast('请选择维修人员')
				return
			}
			if (!that.dataParams.description) {
				uni.$u.toast('请输入故障描述')
				return
			}
			if (!that.dataParams.failurePictures) {
				uni.$u.toast('请上传故障照片')
				return
			}
			console.log('提交参数---', that.dataParams)
			uni.$u.http.post(`/device/mobile/deviceRepair/addRepairInfo`, that.dataParams).then(res => {
				console.log('res===>', res)
				if (res.code == 0) {
					// uni.$u.toast('提交成功！')
					uni.showToast({
						title: '报修成功！',
						icon: 'success',
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/subPackagesA/repairList/index'
						})

					}, 500)
				}
			}).catch(err => {
				uni.$u.toast(err)
			})
		},
		getdata(e) {
			this.fileList = e;
			if (this.fileList.length > 0) {
				this.dataParams.failurePictures = "";
				let arry = []
				this.fileList.map(item => {
					arry.push(item)
				})
				this.dataParams.failurePictures = arry.toString()
			}
		},
		deletePic(e) {
			this.fileList = e;
			console.log(e, '这不是图片吗')
			if (this.fileList.length > 0) {
				this.dataParams.failurePictures = "";
				let arry = []
				this.fileList.map(item => {
					arry.push(item)
				})
				this.dataParams.failurePictures = arry.toString()
			}
		}

	}

}
</script>

<style lang="scss">
page {
	background: #FFFFFF;
}

.bx-list {
	background: #fff;
	border-bottom: none;

	.bx-list-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		text-overflow: ellipsis;
		white-space: nowrap;

		.left {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 0px;
			color: #4D4D4D;
		}

		.right {
			display: flex;
			justify-content: space-around;
			width: 55%;

			.icon-app-saoma::before {
				margin-right: 8rpx;
			}

			.icon-app-add::before {
				margin-right: 8rpx;
			}

			.sm-add {
				display: flex;
				align-items: center;
				padding: 15rpx 20rpx;
				border-radius: 8rpx;
				color: #02AD82;
				background: rgba(2, 173, 130, 0.2);
				font-size: 28rpx;
			}

			.sm-sd {
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
				border-radius: 8rpx;
				color: #0F53AC;
				background: rgba(15, 83, 172, 0.2);
				font-size: 28rpx;
			}
		}

		.right1 {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #A6A6A6;
		}

		.select-bg {
			color: #000000;
		}

		.margin1 {
			margin-top: 2rpx;
			padding: 40rpx 0 10rpx 0;
		}
	}

	.bx-info {
		display: flex;
		padding: 10rpx 20rpx 20rpx 20rpx;

		.left-icon {

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 12rpx;
			}
		}

		.right-txt {
			padding-left: 16rpx;

			.txt1 {
				color: rgba(77, 77, 77, 1);
				font-size: 34rpx;
				font-weight: 400;
			}

			.txt2 {
				color: rgba(140, 140, 140, 1);
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}

	}

	.input-textrea {
		margin: 20rpx;
		border-radius: 8rpx;
		background: #f2f2f2;

		.textrea {
			background: #f2f2f2;
		}
	}

}

.line {
	width: 100%;
	height: 1px;
	background: #f2f2f2;
}

.bx-title {
	background: #fff;
	padding: 20rpx;

	.left {
		display: flex;
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 0px;
		color: rgba(77, 77, 77, 1);
		background: #fff;
	}
}

.margin2 {
	margin-top: 2rpx;
	padding-top: 60rpx;
}

.bx-upload {
	padding: 20rpx 30rpx;
	background: #fff;
}

.bx-title2 {
	color: #8c8c8c;
	font-size: 28rpx;
	padding: 30rpx;
	text-align: 42rpx;
	// background: #f2f2f2;
}

.bx-bottom {
	width: 100%;
	// background: #f2f2f2;
	display: flex;
	justify-content: center;
	align-items: center;
	// padding: 48rpx 0;
	padding-top: 18rpx;

	.btn {
		width: 90%;
		height: 48px;
		border-radius: 12rpx;
		background: #0F53AC;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 0px;
	}
}
</style>